<template>
  <div>
    <a-row :gutter="5">
      <a-col :span="5">
        <a-card :bordered="false" title="条款&协议分类" :headStyle="heightStyle" :body-style="bodyStyle">
          <a-row style="margin-left: 10px">
            <a-button @click="addHTml(0)" type="primary" icon="plus">添加分类</a-button>
            <a-button title="删除" @click="delHtml" type="default" icon="delete" v-if="formItem.htmlId">删除</a-button>
          </a-row>
          <a-tree
            :treeData="treeData"
            @select="onSelect"
          />
        </a-card>
      </a-col>
      <a-col :span="19">
        <a-card :bordered="false" title="内容编辑">

          <f-form ref="form" :action="api.html" :form-key="this.formItem.htmlId" @success="onSuccess">
            <f-form-item label="标题" name="htmlTitle" :required="true" :value="formItem.htmlTitle"/>
            <f-form-item label="内容" type="editor" name="htmlContent" :value="formItem.htmlContent"/>
          </f-form>
          <div class="form-footer">
            <a-button type="primary" @click="handleSubmit" :loading="saving" icon="save" :disabled="btnDisabled">保存</a-button>
          </div>

        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { listToTree2 } from '@/utils/util'

  export default {
    name: 'index',
    components: {},
    data () {
      return {
        catagoryState: 1,
        saving: false,
        btnDisabled: true,
        parentId: null,
        bodyStyle: {
          minHeight: '600px'
        },
        heightStyle: {
          height: 55
        },
        formItem: {
          htmlId: '',
          htmlContent: '',
          htmlTitle: '',
          parentId: 0
        },
        treeData: []
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      loadData () {
        this.http.get(this, {
          url: this.api.html.list,
          data: {
            params: {}
          },
          success: function (me, data) {
            let obj = listToTree2(data, {
              primaryKey: 'htmlId',
              titleKey: 'htmlTitle'
            })
            me.treeData = obj
          }
        })
      },
      onSelect (selectedKeys, { node }) {
        this.btnDisabled = false
        this.$refs.form.resetFields()
        this.formItem = node.dataRef
      },
      onSuccess () {
        this.loadData()
        this.saving = false
      },
      addHTml (parentId) {
        this.http.post(this, {
          url: this.api.html.add,
          data: {
            params: { htmlTitle: '条款标题', parentId: parentId, htmlType: 1 }
          },
          success: function (me) {
            me.loadData()
          }
        })
      },
      delHtml () {
        this.http.del(this, {
          url: this.api.html.remove,
          data: {
            ids: this.formItem.htmlId
          },
          success: function (me) {
            me.loadData()
            me.btnDisabled = true
          }
        })
      },
      ttt (t) {
        console.log('@@@@@@@@@@@@@@@@@@@@@@@@@' + t)
      },
      handleSubmit () {
        this.saving = true
        this.$refs.form.submit({ htmlContent: this.formItem.htmlContent })
      }
    }
  }
</script>
